<template>
  <div
    @mousewheel.stop="mousewheelStop"
    :style="{ 'max-height': props.height + 'px' }"
    class="unit-exbit-null-remarks-info"
    @mouseup="endDrag()"
    @mouseleave="handleMouseLeave"
  >
    <div
      :scrollbar-width="0"
      :id="'info-remarks-byId' + props.byid"
      class="unit-exbi-remarks-info-remarks scroll-hieed"
      :class="{ 'unit-exbi-remarks-info-remarks-no': !isScrollType, 'home-box-Android': isAndroidType }"
    >
      <slot name="solidBorderCon"></slot>
    </div>

    <div class="solid-box-parent" :style="{ height: props.height + 'px' }" v-if="isScrollType">
      <div
        class="solid-box"
        :style="{ height: props.height + 'px' }"
        ref="track"
        @mousedown="startDrag($event)"
        @mousemove="draggings($event)"
        @mouseup="endDrag()"
      >
        <div class="solid-border">
          <slot name="solidBorderEx"></slot>
        </div>
        <div
          :style="{
            top:
              knobPosition < 10
                ? 0 + 'px'
                : knobPosition > props.height - topNmuber / 2
                ? props.height - topNmuber + 'px'
                : knobPosition + 'px',
          }"
          ref="knob"
          class="templatestyle1-scroll-box-tumb"
        >
          <div class="shadow-box"></div>

          <img v-if="props.scrollSrc" :src="props.scrollSrc" alt="" />
          <div v-else class="scrollBar"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { getTextHtml } from '@/utils/minxin';
import { ref, watch, computed, onMounted, nextTick, onUnmounted, onActivated, onDeactivated } from 'vue';
import { useProjectStore } from '@/store';
import { isAndroid } from '@/hooks/index.ts';

const isAndroidType = isAndroid();
const store = useProjectStore();
const isScrollType = ref(true);
const track = ref(null); // 拖动轨道
const knob = ref(null); // 拖动手柄
const knobPosition = ref(0); // 手柄位置
const dragging = ref(false); // 是否拖动中
const per = ref(0);
const timer = ref(null);
const modelShow = ref(false); //
const topNmuber = ref(22);
topNmuber.value = (document.documentElement.clientHeight / 900) * 22;
const props = defineProps({
  remarks: {
    type: String,
  },
  byid: {
    type: Number,
  },
  height: {
    type: Number,
    defalt: 260,
  },
  scrollSrc: {
    type: String,
  },
  color: {
    type: String,
    defalt: 'rgba(50, 43, 37, 1)',
  },
  topFlag: {
    type: Boolean,
    default: false,
  },
});
const startDrag = (event: any) => {
  if (!isScrollType.value) {
    return;
  }
  dragging.value = true;
  let arrs = event.clientY - track.value.getBoundingClientRect().top;
  if (arrs >= props.height - topNmuber.value) {
    knobPosition.value = arrs - topNmuber.value;
  } else {
    knobPosition.value = arrs;
  }
};

// 拖动时更新手柄位置
const draggings = (event: any) => {
  if (!isScrollType.value) {
    return;
  }
  if (!dragging.value) return;
  const trackTop = track.value.getBoundingClientRect().top;
  // console.log(trackTop);
  const trackHeight = props.height;
  // console.log(trackHeight);
  const y = event.clientY - trackTop;

  let arrs = Math.min(trackHeight, Math.max(0, y)); // 手柄位置Math
  if (arrs > props.height - topNmuber.value) {
    knobPosition.value = arrs - topNmuber.value;
  } else {
    knobPosition.value = arrs;
  }
  //   let scrollB=knobPosition.value/260
  var container = document.getElementById('info-remarks-byId' + props.byid); // 滚动容器
  var scrollPercent = knobPosition.value / props.height; // 需要滚动到的百分比
  var scrollHeight = container.scrollHeight; //总滚动高度
  var clientHeight = container.clientHeight; //滚动容器高度
  container.scrollTop = (scrollHeight - clientHeight) * scrollPercent; //设置滚动位置
};

// 结束拖动时更新状态
const endDrag = () => {
  dragging.value = false;
};
const handleMouseLeave = () => {
  dragging.value = false;
};
const isScrollBox = (element: any) => {
  // console.log(element.scrollHeight > element.clientHeight);
  // alert(element.scrollHeight > props.height);
  return element.scrollHeight > element.clientHeight;
};
const initScroll = () => {
  var container = document.getElementById('info-remarks-byId' + props.byid); // 滚动容器
  if (isScrollBox(container)) {
    isScrollType.value = true;
  } else {
    isScrollType.value = false;
    // console.log('滚动盒子开启禁止滚动');
  }
};
const initScrollBox = () => {
  if (!isScrollType.value) {
    return;
  }
  console.log('123123');

  var container = document.getElementById('info-remarks-byId' + props.byid); // 滚动容器
  container.addEventListener('scroll', function () {
    var scrollTop = container.scrollTop;
    var scrollHeight = container.scrollHeight;
    var height = container.clientHeight;
    var scrolled = (scrollTop / (scrollHeight - height)) * 100;
    knobPosition.value = (props.height * scrolled) / 100;
  });
};
const mousewheelStop = (event: any) => {
  // event.preventDefault(); // 阻止事件的默认行为
};

// 置顶
const top = () => {
  var container = document.getElementById('info-remarks-byId' + props.byid); // 滚动容器
  container.scrollTo({
    top: 0,
  });
};

onMounted(() => {
  // setTimeout(() => {
  //   initScroll();
  //   initScrollBox();
  // }, 300);
  // setTimeout(() => {
  //   initScroll();
  //   initScrollBox();
  // }, 3000);
  // setTimeout(() => {
  //   initScroll();
  //   initScrollBox();
  // }, 8000);
});

onUnmounted(() => {
  clearInterval(timer.value);
});
timer.value = setInterval(() => {
  initScroll();
  initScrollBox();
}, 500);
onDeactivated(() => {
  clearInterval(timer.value);
});
watch(
  () => props.topFlag,
  () => {
    nextTick(() => {
      top();
    });
  },
  { deep: true },
);
</script>

<style scoped lang="less">
.unit-exbit-null-remarks-info {
  display: flex;
  position: relative;
  z-index: 99;
  width: 100%;
  transform: translateZ(0px);
}
.unit-exbi-remarks-info-remarks {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;

  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none !important;
  }
}
.home-box-Android {
  overflow: scroll !important;
  overflow-x: auto;
}
.unit-exbi-remarks-info-remarks-no {
  width: 100%;
}
.unit-exbi-remarks-info-remarks::-webkit-scrollbar {
  display: none !important;
}
.unit-exbi-remarks-info-remarks1 {
  color: #927560 !important;
}
.solid-box {
  cursor: pointer;
  position: relative;
  width: 32px;
}
.unit-exbi-remarks-info-remarks::-webkit-scrollbar {
  display: none !important;
}
.templatestyle1-scroll-box-tumb {
  display: flex;
  cursor: pointer;
  position: absolute;
  position: relative;
  z-index: 60;
  width: 40px;
  height: 40px;
  left: 50%;
  transform: translateX(-50%);
  .shadow-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    z-index: 30;
  }
  img {
    width: 40px;
    height: 40px;
    margin-top: -6px;
    -webkit-user-select: none; /* 禁用 iOS 上的选择功能 */
    -moz-user-select: none; /* 禁用 Firefox 上的选择功能 */
    -ms-user-select: none; /* 禁用 IE/Edge 上的选择功能 */
    user-select: none; /* 标准语法 */
  }
}

.solid-border {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: 32px;
}
.solid-box-parent {
  display: flex;
  justify-content: center;
  position: relative;
  top: 0;
  right: 0;
  width: 40px;
}
.scroll-hieed::-webkit-scrollbar {
  width: 0px;
  display: none !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scroll-hieed::-webkit-scrollbar-button {
  display: none;
}
::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}
</style>
